<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/admin.css">
    <style type="text/css">
        .form {
            width: 600px;
            margin-top: 30px;
        }
    </style>
    <script>
        function showImg() {
            //  目的： 文本框选择图片 - 前端显示的图片自动切换
            //  在使用这个函数的时候，发生变化的元素要给出 id 属性
            var f = new FileReader();   //  JavaScript文件处理对象
            f.onload = function (ev) {
                //  设置 img 的src属性 为 图片的物理路径 （img 默认图片的id（用于替换））
                img.src = ev.target.result;
            }
            //  发生变化的元素 id 属性作为这个函数的参数
            f.readAsDataURL(file.files[0])  //  读取文本框中的文件 files[0] 代表文本框读取的第一个文件
        }
    </script>
</head>
<body>
<div class="form">
    <div class="title">商品信息添加</div>
    <!--文件表单需要加上的属性 ：enctype="multipart/form-data"-->
    <form action="/admin/goods/add_submit" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>商品名称</td>
                <td>
                    <input type="text" name="goodsName">
                </td>
            </tr>
            <tr>
                <td>价格</td>
                <td>
                    <input type="text" name="price">
                </td>
            </tr>
            <tr>
                <td>产地</td>
                <td>
                    <input type="text" name="address">
                </td>
            </tr>
            <tr>
                <td>生产日期</td>
                <td>
                    <input type="date" name="produceDate">
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <img src="/img/default.png" alt="" width="80px" height="100px" id="img">
                    <!--添加交换事件图片可以自动切换-->
                    <input type="file" name="file" id="file" onchange="showImg()">
                </td>
            </tr>
            <tr>
                <!--遍历针对商品分类的查询结果-->
                <td>商品分类</td>
                <td>
                    <select name="category.categoryId">
                        <option text="请选择">请选择</option>
                        <option th:each="category:${categoryList}"
                                th:value="${category.categoryId}"
                                th:text="${category.categoryName}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="添加">
                </td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>